<template>
  <div>
    <div style="display: flex">
      省：<el-select
        style="width: 120px; margin-right: 20px;"
        @change="provinceChange"
        :disabled="disabled"
        v-model="provinceValue"
        :filterable="showSearch"
      >
        <el-option
          v-for="item in province"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      市：<el-select
        style="width: 120px; margin-right: 20px;"
        @change="cityChange"
        :disabled="disabled"
        v-model="cityValue"
        :filterable="showSearch"
      >
        <el-option
          v-for="item in city"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      区：<el-select
        style="width: 120px; "
        @change="countyChange"
        :disabled="disabled"
        v-model="countyValue"
        :filterable="showSearch"
      >
        <el-option
          v-for="item in county"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
     
    </div>
     <br />
      详细地址：<el-input
        style="width: 280px"
        @change="detailChange"
        v-model="detail"
      />
  </div>
</template>

<script>
import { fileDownload } from "@/utils/http";
export default {
  data() {
    return {
      province: [],
      city: [],
      county: [],
      provinceValue: "",
      cityValue: "",
      countyValue: "",
      currentCitys: [],
      options: [],
      detail: "",
    };
  },
  props: {
    disabled: Boolean,
    value: {
      type: Object,
      default() {
        return {
          province: "",
          city: "",
          county: "",
          detail: "",
        };
      },
    },

    showSearch: {
      type: Boolean,
      default: true,
    },
  },
  model: {
    prop: "value",
    event: "change",
  },

  methods: {
    detailChange(v) {
      const value = {
        province: this.provinceValue,
        city: this.cityValue,
        county: this.countyValue,
        detail: this.detail,
      };
      this.$emit("change", value);
    },
    init() {
      this.province = [];
      this.city = [];
      this.county = [];
      this.detail = this.value.detail;
      this.provinceValue = this.value.province || this.options[0].value;
      this.options.forEach((province) => {
        this.province.push({
          value: province.value,
          label: province.label,
        });
      });
      const oldValue = { ...this.value };
      this.provinceChange(null);
      this.cityValue = oldValue.city || this.cityValue;
      this.cityChange(null);
      this.countyValue = oldValue.county || this.countyValue;
      this.countyChange(null);
    },
    async provinceChange(v) {
      this.city = [];
      this.county = [];
      let s = this.options.find((p) => p.value === this.provinceValue);
      if (s) {
        this.currentCitys = s.children;
        s.children.forEach((city) => {
          this.city.push({
            value: city.value,
            label: city.label,
          });
        });
        this.cityValue = this.city[0].value;
        this.cityChange(null);
        // this.countyValue = '';
        const value = {
          province: this.provinceValue,
          city: this.cityValue,
          county: this.countyValue,
          detail: this.detail,
        };
        this.$emit("change", value);
      }
    },
    async cityChange(v) {
      // console.log(v)
      this.county = [];
      let s = this.currentCitys.find((p) => p.value === this.cityValue);
      if (s) {
        s.children.forEach((county) => {
          this.county.push({
            value: county.value,
            label: county.label,
          });
        });
        this.countyValue = this.county[0].value;
        const value = {
          province: this.provinceValue,
          city: this.cityValue,
          county: this.countyValue,
          detail: this.detail,
        };
        // console.log(value)
        this.$emit("change", value);
      }
    },
    countyChange(v) {
      const value = {
        province: this.provinceValue,
        city: this.cityValue,
        county: this.countyValue,
        detail: this.detail,
      };
      this.$emit("change", value);
    },
  },
  async mounted() {
    let options = await fileDownload.get("/upload/admins.json");
    this.options = options.data;
    this.init();
  },
};
</script>

<style>
</style>